<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品优购</title>
    <link rel="shortcut icon" href=" favicon.ico">
    <!-- 引入初始化文件 -->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="fonts/iconfont.css">
    <link rel="stylesheet" href="css/index.css">

<body>
    <!-- 快捷导航栏制作 -->
    <div class="shoutcut">
        <div class="w">
            <div class="l">
                <ul>
                    <li>品优购欢迎您！</li>
                    <li><a href="">请登录</a><a href="">免费注册</a></li>
                </ul>
            </div>
            <div class="r">

                <ul>
                    <li><a href="">我的订单</a></li>
                    <li>|</li>
                    <li class="b"><a href="">我的品优购</a></li>
                    <li>|</li>
                    <li><a href="">品优购会员</a></li>
                    <li>|</li>
                    <li><a href="">企业采购</a></li>
                    <li>|</li>
                    <li class="b"><a href="">关注品优购</a></li>
                    <li>|</li>
                    <li class="b"><a href="">客户服务</a></li>
                    <li>|</li>
                    <li class="b"><a href="">网站导航</a></li>

                </ul>
            </div>
        </div>
    </div>
    <!-- header -->
    <div class="header w" id="header">
        <div class="logo">
            <h1>
                <a href="index.html" title="品优购商城">品优购商城</a>
            </h1>
        </div>
        <div class="search">
            <div class="sear">
                <input type="text" placeholder="语言开发"><button>搜索</button>
            </div>
            <div class="hot">
                <ui>
                    <li><a href="">优惠购首发</a></li>
                    <li><a href="">亿元优惠</a></li>
                    <li><a href="">9.9元团购</a></li>
                    <li><a href="">美满99减30</a></li>
                    <li><a href="">办公用品</a></li>
                    <li><a href="">通信</a></li>
                </ui>
            </div>

            <!-- <a href="">我的购物车</a> -->

        </div>
        <div class="shop">
            <div class="tu"></div>
            <a href="">我的购物车</a>
            <i>8</i>
        </div>
        </h1>
    </div>
    <!-- nav -->
    <nav class="nav" id="nav">
        <div class="w">
            <div class="fenlei">
                <dl>
                    <dt>全部商品分类</dt>
                    <dd><a href="">家用电器</a> </dd>
                    <dd><a href="">手机</a>、<a href="">数码</a>、<a href="">通信</a></dd>
                    <dd><a href="">电脑</a>、<a href="">办公</a></dd>
                    <dd><a href="">家居</a>、<a href="">家具</a>、<a href="">家装</a>、<a href="">厨具</a></dd>
                    <dd><a href="">男装</a>、<a href="">女装</a>、<a href="">童装</a>、<a href="">内衣</a></dd>
                    <dd><a href="">个户化妆</a>、<a href="">清洁用品</a>、<a href="">宠物</a></dd>
                    <dd><a href="">家用电器</a> </dd>
                    <dd><a href="">手机</a>、<a href="">数码</a>、<a href="">通信</a></dd>
                    <dd><a href="">电脑</a>、<a href="">办公</a></dd>
                    <dd><a href="">家居</a>、<a href="">家具</a>、<a href="">家装</a>、<a href="">厨具</a></dd>
                    <dd><a href="">男装</a>、<a href="">女装</a>、<a href="">童装</a>、<a href="">内衣</a></dd>
                    <dd><a href="">个户化妆</a>、<a href="">清洁用品</a>、<a href="">宠物</a></dd>
                    <dd><a href="">个户化妆</a>、<a href="">清洁用品</a>、<a href="">宠物</a></dd>
                    <dd><a href="">个户化妆</a>、<a href="">清洁用品</a>、<a href="">宠物</a></dd>
                    <dd><a href="">个户化妆</a>、<a href="">清洁用品</a>、<a href="">宠物</a></dd>
                </dl>
            </div>
            <div class="nav_right">
                <ul>
                    <li><a href="">服装城</a></li>
                    <li><a href="">美妆馆</a></li>
                    <li><a href="">传智超市</a> </li>
                    <li><a href="">全球购</a> </li>
                    <li><a href="">闪购</a> </li>
                    <li><a href="">团购</a> </li>
                    <li><a href="">拍卖</a></li>
                    <li><a href="">有趣</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- main部分 -->
    <div class="w">
        <div class="main">
            <div class="focus1"></div>
            <div class="focus2">
                <div class="kb">
                    <div class="tou">
                        <h3>品优购快报</h3>
                        <a href="">更多</a>
                    </div>
                    <ul>
                        <li>【特惠】品质生活在品优购</li>
                        <li>【特惠】品质生活在品优购</li>
                        <li>【特惠】鸟蛤的尺寸品质生活在品优购</li>
                        <li>【特惠】品质生现场吧活在品优购</li>
                        <li>【特惠】品质生活被覆盖大厨在品优购</li>
                    </ul>
                </div>
                <div class="sh">
                    <ul>
                        <li>
                            <div></div><span>话费</span><i></i>
                        </li>
                        <li>
                            <div></div><span>话费</span>
                        </li>
                        <li>
                            <div></div><span>话费</span><i></i>
                        </li>
                        <li>
                            <div></div><span>话费</span>
                        </li>
                        <li>
                            <div></div><span>话费</span><i></i>
                        </li>
                        <li>
                            <div></div><span>话费</span><i></i>
                        </li>
                        <li>
                            <div></div><span>话费</span>
                        </li>
                        <li>
                            <div></div><span>话费</span><i></i>
                        </li>
                        <li>
                            <div></div><span>话费</span>
                        </li>
                        <li>
                            <div></div><span>话费</span><i></i>
                        </li>
                        <li>
                            <div></div><span>话费</span>
                        </li>
                        <li>
                            <div></div><span>话费</span>
                        </li>
                    </ul>
                </div>
                <div class="guanggao">
                    <img src="upload/bargain.png" alt="">

                </div>


            </div>
        </div>
    </div>
    <!-- 今日推荐。 -->
    <div class="w tj" id="tj">
        <div class="j">
            <img src="images/recom.png">
        </div>
        <div class="t">
            <ul>
                <li>
                    <img src="images/recom_03.jpg">
                </li>
                <li class="li"></li>
                <li>
                    <img src="images/recom_03.jpg">
                </li>
                <li class="li"></li>
                <li>
                    <img src="images/recom_03.jpg">
                </li>
                <li class="li"></li>
                <li>
                    <img src="images/recom_03.jpg">
                </li>

            </ul>

        </div>

    </div>
    <!-- 家用电器部分 -->
    <div class="w electrical" id="electrical">
        <div class="nav_electrical">
            <h3>家用电器</h3>
            <dl>
                <dt>热门</dt>
                <dd class="l">|</dd>
                <dd><a href="">大家电</a></dd>
                <dd class="l">|</dd>
                <dd><a href="">大家电</a></dd>
                <dd class="l">|</dd>
                <dd><a href="">大fdv家电</a></dd>
                <dd class="l">|</dd>
                <dd><a href="">大家fvdf电</a></dd>
                <dd class="l">|</dd>
                <dd><a href="">大家电</a></dd>
                <dd class="l">|</dd>
                <dd><a href="">大fvdf家电</a></dd>
                <dd class="l">|</dd>
                <dd><a href="">大家电</a></dd>
                <dd class="l">|</dd>
                <dd><a href="">大家电</a></dd>
            </dl>
        </div>
        <div class="center">
            <div class="first">
                <div class="top">
                    <ul>
                        <li>节能补贴</li>
                        <li>节能补贴</li>
                        <li>节能补贴</li>
                    </ul>
                    <ul>
                        <li>节能补贴</li>
                        <li>节能补贴</li>
                        <li>节能补贴</li>
                    </ul>
                </div>
                <img src="upload/floor-1-1.png">
            </div>
            <div class="second">
                <img src="upload/floor-1-b01.png" alt="">
                <div class="lunbo">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
            <div class="third">
                <ul class="a">
                    <li><img src="upload/floor-1-2.png"> </li>
                    <li> <img src="upload/floor-1-2.png"></li>
                </ul>
                <ul>
                    <li class="chang"><img src="upload/floor-1-4.png"> </li>
                </ul>
                <ul>
                    <li><img src="upload/floor-1-2.png"> </li>
                    <li><img src="upload/floor-1-2.png"> </li>
                </ul>
            </div>
        </div>
        <div class="tubiao">
            <ul>
                <li><img src="upload/brand_07.png" alt=""></li>
                <li><img src="upload/brand_03.png" alt=""></li>
                <li><img src="upload/brand_05.png" alt=""></li>
                <li><img src="upload/brand_09.png" alt=""></li>
                <li><img src="upload/brand_11.png" alt=""></li>
                <li><img src="upload/brand_13.png" alt=""></li>
                <li><img src="upload/brand_15.png" alt=""></li>
                <li><img src="upload/brand_17.png" alt=""></li>
                <li><img src="upload/brand_19.png" alt=""></li>
                <li><img src="upload/brand_21.png" alt=""></li>
            </ul>

        </div>
    </div>
    <!-- 手机通信 -->
    <div class="w electrical">
        <div class="nav_electrical">
            <h3>家用电器</h3>
            <dl>
                <dt>热门</dt>
                <dd class="l">|</dd>
                <dd><a href="">大家电</a></dd>
                <dd class="l">|</dd>
                <dd><a href="">大家电</a></dd>
                <dd class="l">|</dd>
                <dd><a href="">大fdv家电</a></dd>
                <dd class="l">|</dd>
                <dd><a href="">大家fvdf电</a></dd>
                <dd class="l">|</dd>
                <dd><a href="">大家电</a></dd>
                <dd class="l">|</dd>
                <dd><a href="">大fvdf家电</a></dd>
                <dd class="l">|</dd>
                <dd><a href="">大家电</a></dd>
                <dd class="l">|</dd>
                <dd><a href="">大家电</a></dd>
            </dl>
        </div>
        <div class="center">
            <div class="first">
                <div class="top">
                    <ul>
                        <li>节能补贴</li>
                        <li>节能补贴</li>
                        <li>节能补贴</li>
                    </ul>
                    <ul>
                        <li>节能补贴</li>
                        <li>节能补贴</li>
                        <li>节能补贴</li>
                    </ul>
                </div>
                <img src="upload/floor-1-1.png">
            </div>
            <div class="second">
                <img src="upload/floor-1-b01.png" alt="">
                <div class="lunbo">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
            <div class="third">
                <ul class="a">
                    <li><img src="upload/floor-1-2.png"> </li>
                    <li> <img src="upload/floor-1-2.png"></li>
                </ul>
                <ul>
                    <li class="chang"><img src="upload/floor-1-4.png"> </li>
                </ul>
                <ul>
                    <li><img src="upload/floor-1-2.png"> </li>
                    <li><img src="upload/floor-1-2.png"> </li>
                </ul>
            </div>
        </div>
        <div class="tubiao">
            <ul>
                <li><img src="upload/brand_07.png" alt=""></li>
                <li><img src="upload/brand_03.png" alt=""></li>
                <li><img src="upload/brand_05.png" alt=""></li>
                <li><img src="upload/brand_09.png" alt=""></li>
                <li><img src="upload/brand_11.png" alt=""></li>
                <li><img src="upload/brand_13.png" alt=""></li>
                <li><img src="upload/brand_15.png" alt=""></li>
                <li><img src="upload/brand_17.png" alt=""></li>
                <li><img src="upload/brand_19.png" alt=""></li>
                <li><img src="upload/brand_21.png" alt=""></li>

            </ul>

        </div>
    </div>

    <!-- footer部分 -->
    <footer class="footer" id="footer">
        <div class="w">
            <div class="first">
                <ul>
                    <li><i></i>
                        <h3>正品保障</h3>
                        <p>正品保障，提供发票</p>
                    </li>
                    <li><i></i>
                        <h3>正品保障</h3>
                        <p>正品保障，提供发票</p>
                    </li>
                    <li><i></i>
                        <h3>正品保障</h3>
                        <p>正品保障，提供发票</p>
                    </li>
                    <li><i></i>
                        <h3>正品保障</h3>
                        <p>正品保障，提供发票</p>
                    </li>
                    <li><i></i>
                        <h3>正品保障</h3>
                        <p>正品保障，提供发票</p>
                    </li>
                </ul>
            </div>
            <div class="c">
                <dl>
                    <dt>购物指南</dt>
                    <dd>购物流程</dd>
                    <dd>会员介绍</dd>
                    <dd>生活旅行/团购</dd>
                    <dd>常见问题</dd>
                    <dd>大家电</dd>
                    <dd>联系客服</dd>
                </dl>
                <dl>
                    <dt>购物指南</dt>
                    <dd>购物流程</dd>
                    <dd>会员介绍</dd>
                    <dd>生活旅行/团购</dd>
                    <dd>常见问题</dd>
                    <dd>大家电</dd>
                    <dd>联系客服</dd>
                </dl>
                <dl>
                    <dt>购物指南</dt>
                    <dd>购物流程</dd>
                    <dd>会员介绍</dd>
                    <dd>生活旅行/团购</dd>
                    <dd>常见问题</dd>
                    <dd>大家电</dd>
                    <dd>联系客服</dd>
                </dl>
                <dl>
                    <dt>购物指南</dt>
                    <dd>购物流程</dd>
                    <dd>会员介绍</dd>
                    <dd>生活旅行/团购</dd>
                    <dd>常见问题</dd>
                    <dd>大家电</dd>
                    <dd>联系客服</dd>
                </dl>
                <dl>
                    <dt>购物指南</dt>
                    <dd>购物流程</dd>
                    <dd>会员介绍</dd>
                    <dd>生活旅行/团购</dd>
                    <dd>常见问题</dd>
                    <dd>大家电</dd>
                    <dd>联系客服</dd>
                </dl>
                <dl class="last_dl">
                    <dt>购物指南</dt>
                    <dd class="wechat"></dd>
                    <dd>品优购客户端</dd>

                </dl>

            </div>
            <div class="last">
                <ul>
                    <li>联系我们 </li>
                    <li>联系客服</li>
                    <li>商家入驻</li>
                    <li>营销中心</li>
                    <li>手机品优购</li>
                    <li>友情链接</li>
                    <li>销售联盟</li>
                    <li>品优购社区</li>
                    <li>品优购公益</li>
                    <li>English Site</li>
                    <li>Contact Uf</li>
                </ul>
                <div class="p1">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn
                </div>
                <p class="p">京ICP备08001421号京公网安备110108007702</p>
            </div>
        </div>

    </footer>
    <!-- 侧边栏 -->
    <div class="cebianlan">
        <ul>
            <li><a href="#header">首页</a></li>
            <li><a href="#nav">全部商品分类</a></li>
            <li><a href="#tj">今日推荐</a></li>
            <li><a href="#electrical">家用电器</a></li>
            <li><a href="#footer">关于</a></li>
        </ul>
    </div>


</body>

</html>